<template>
  <div id="myChart_map1" :style="{ width: '100%', height: vHeight + 'px' }"></div>
</template>

<script>
import QDMapJson from '@/assets/echartMap-QD.json'
export default {
  components: {},
  props: {
    vHeight: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      mapData: [], // 地图点位"市区级政务服务大厅"数据
      mapData_2: [], // 地图点位"镇街级便民服务中心"数据
      mapData_3: [], // 地图点位"政务服务自助终端网点"数据
    };
  },
  watch: {},
  methods: {
    // 获取政务服务导航图数据
    getQDMapData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/get-serviceSite-list", {})
        .then((res) => {
          res.data.data.map((item) => {
            item.map((childItem) => {
              if (childItem.location !== null) {
                childItem.name = childItem.address;
                childItem.value = childItem.location.split(",");
              }
            });
          });
          this.mapData = res.data.data;

          this.renderChart_QDMap(); // 政务服务导航图
        })
        .catch(() => {});
    },
    // 政务服务导航图
    renderChart_QDMap() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_map1"));

      this.$echarts.registerMap("qingdao", QDMapJson);

      let option = {
        visualMap: {
          show: false,
          x: "left",
          y: "center",
          seriesIndex: [1],
          min: 0,
          max: 500,
          text: ["高", "低"], // 文本，默认为数值文本
          textStyle: {
            color: "#fff",
          },
          inRange: {},
        },
        geo: {
          show: true,
          map: "qingdao",
          label: {
            normal: {
              show: false,
              color: "#fff",
            },
            emphasis: {
              show: false,
              color: "#fff",
            },
          },
          zoom: 1.25,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#060f39",
              borderWidth: 1,
              borderColor: "#016BBC",
            },
            emphasis: {
              areaColor: "rgba(107, 176, 207, .6)",
            },
          },
        },
        series: [
          {
            name: "市区级",
            type: "effectScatter", // effectScatter scatter
            coordinateSystem: "geo",
            geoIndex: 0,
            label: {
              normal: {
                show: false,
                formatter(params) {
                  return `{fline|${params.name}}`;
                },
                position: "top",
                backgroundColor: "rgba(40, 75, 247, .8)", // 'rgba(254, 174, 33, .8)',
                borderRadius: 3,
                lineHeight: 30,
                color: "#f7fafb",
                rich: {
                  fline: {
                    padding: [5, 5, 5, 5],
                    color: "#fff",
                    fontSize: 18,
                    fontWeight: 700,
                  },
                },
              },
            },
            data: this.mapData[0],
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#4649f1", // 打点颜色
                shadowBlur: 5,
                shadowColor: "#4649f1",
              },
            },
          },
          {
            name: "镇街级",
            type: "scatter", // effectScatter
            coordinateSystem: "geo",
            geoIndex: 0,
            label: {
              normal: {
                show: false,
                formatter(params) {
                  return `{fline|${params.name}}`;
                },
                position: "top",
                backgroundColor: "rgba(40, 75, 247, .8)", // 'rgba(254, 174, 33, .8)',
                borderRadius: 3,
                lineHeight: 30,
                color: "#f7fafb",
                rich: {
                  fline: {
                    padding: [5, 5, 5, 5],
                    color: "#fff",
                    fontSize: 18,
                    fontWeight: 700,
                  },
                },
              },
            },
            data: this.mapData[1],
            symbol: "arrow",
            symbolSize: 12,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#e93f42",
                shadowBlur: 5,
                shadowColor: "#f00",
              },
            },
          },
          {
            name: "自助终端网点",
            type: "scatter", // scatter effectScatter
            coordinateSystem: "geo",
            symbol: "pin", // 点的形状 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            geoIndex: 0,
            symbolSize: 15,
            itemStyle: {
              normal: {
                color: "#fffe86", //标志颜色 D8BC37
              },
            },
            data: this.mapData[2],
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
          {
            type: "map",
            mapType: "qingdao",
            aspectScale: 0.75,
            zoom: 1.25,
            // geoIndex: 1,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#333",
                  fontSize: 18,
                  fontWeight: 700,
                },
                formatter: function (val) {
                  let { name, value } = val;
                  return `${name}`;
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#fff", // "#9dc6d6",
                areaColor: "rgba(138, 198, 253)", // 地图区域颜色 rgba(138, 198, 253)
                // color: ['#B2CAE0', '#D2EAFF', '#8AC6FD', '#45A5F8', '#d6e9fd']
              },
              emphasis: {
                // 鼠标悬浮时，区块颜色
                areaColor: "#45A5F8",
              },
            },
            animation: false,
            data: [
              { name: "市北区", value: 381 },
              { name: "市南区", value: 212 },
              { name: "李沧区", value: 322 },
              { name: "西海岸新区", value: 41 },
              { name: "城阳区", value: 44 },
              { name: "崂山区", value: 32 },
              { name: "即墨区", value: 52 },
              { name: "西海岸新区", value: 41 },
              { name: "平度市", value: 23 },
              { name: "莱西市", value: 64 },
              { name: "胶南市", value: 12 },
            ],
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getQDMapData(); // 获取政务服务导航图数据
    });
  },
};
</script>
<style lang='scss' scoped>
.panel-middle-1 {
  height: 530px;
  padding: 25px;
  margin-bottom: 15px;

  .tuli {
    width: 300px;
    font-size: 24px;
    position: relative;
    left: 55%;
    bottom: 24%;

    span {
      position: relative;
      top: 2px;
      right: 10px;
      border-radius: 50%;
      display: inline-block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e93f42;
    }
    .zhenjie {
      position: relative;
      top: 10px;
      right: 10px;
      display: inline-block;
      width: 22px;
      height: 22px;
      border-radius: 0;
      background: #e93f42;
      transform: rotate(45deg);
      &::before {
        content: "";
        position: absolute;
        background-color: #050f3b;
        top: 0px;
        left: 0px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
    }
    i {
      color: #fffe86;
      font-size: 26px;
      position: relative;
      right: 10px;
    }
  }
}
</style>